<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>插槽的基本使用</h3>

        <my-com1>
            <div>
                父组件中自定义的内容
            </div>
        </my-com1>

        <my-com1>
            <h1>
                父组件h1
            </h1>
            <div slot="img">
                传给img插槽的内容
            </div>
        </my-com1>

        <!-- 插槽处不传入内容 -->
        <my-com1></my-com1>
    </div>

    <script src="./vue.js"></script>
    <script>
        // 插槽
        // 1. 它的作用
        //     在组件的模板中通过slot关键字，预留出区域来，充当占位符的功能。
        // 2. 格式：
        //    定义格式
            //  MyCom1: {
            //     template: `
            //         <div>
            //             <h4>子组件MyCom1</h4>
            //         </div>
            //         ...默认插槽.只有一个..
            //         <slot></slot>
            //         ...具名插槽.有多个..
            //         <slot name="插槽名1"></slot>
            //         ......
            //         <slot name="插槽名2"></slot>
            //         ......
            //     `
            // }

        
        
        //   使用格式
        //    <my-com1>
        //         <div>会填充到默认插槽中</div>
        //         <div slot="插槽名1">会填充到插槽1中</div>
        //         <div slot="插槽名2">会填充到插槽2中</div>
        //    </my-com1>
        // 3. 示例
        const vm = new Vue({
            el: '#app',
            components: {
                MyCom1: {
                    template: `
                        <div style="border:1px solid #ccc; margin:5px;padding:5px;">
                            <slot>默认插槽的内容。如果你不传入东西，我就显示出来</slot>
                            <h4>子组件MyCom1</h4>
                            <slot name="img"></slot>
                        </div>
                    `
                }
            }
        })
    </script>
</body>
</html>